<template>
    <div class="prompt-editor">
      <el-card class="editor-card">
        <template #header>
          <div class="card-header">
            <h3>文案生成提示词</h3>
            <div class="header-actions">
              <el-button 
                type="primary" 
                size="small" 
                @click="resetPrompt" 
                :disabled="loading"
              >
                重置为默认
              </el-button>
            </div>
          </div>
        </template>
  
        <div class="editor-content">
          <el-input
            v-model="localPrompt"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 12 }"
            placeholder="请输入生成文案的提示词..."
            :disabled="loading"
          />
          
          <div class="tips-section">
            <h4>提示词说明：</h4>
            <p>文案生成提示词用于指导AI生成高质量的文案内容。您可以在提示词中：</p>
            <ul>
              <li>使用 <code>{transcript}</code> 作为占位符，表示视频转录文本</li>
              <li>指定文案的风格、长度和格式要求</li>
              <li>提供行业相关的专业术语指导</li>
            </ul>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, watch, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import copywritingService from '@/services/copywritingService';
  
  export default defineComponent({
    name: 'PromptEditor',
    props: {
      modelValue: {
        type: String,
        default: ''
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
      const localPrompt = ref(props.modelValue);
      
      // 监听外部传入值变化
      watch(() => props.modelValue, (newValue) => {
        localPrompt.value = newValue;
      });
      
      // 监听本地值变化，同步到父组件
      watch(localPrompt, (newValue) => {
        emit('update:modelValue', newValue);
      });
      
      // 重置为默认提示词
      const resetPrompt = async () => {
        try {
          const result = await copywritingService.getDefaultPrompt();
          if (result.success && result.prompt) {
            localPrompt.value = result.prompt;
            ElMessage.success('已重置为默认提示词');
          } else {
            throw new Error(result.message || '获取默认提示词失败');
          }
        } catch (error) {
          ElMessage.error(`重置提示词失败: ${error.message}`);
        }
      };
      
      // 组件加载时，如果没有提示词，获取默认提示词
      onMounted(() => {
        if (!localPrompt.value) {
          resetPrompt();
        }
      });
      
      return {
        localPrompt,
        resetPrompt
      };
    }
  });
  </script>
  
  <style scoped>
  .prompt-editor {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .card-header h3 {
    margin: 0;
  }
  
  .header-actions {
    display: flex;
    gap: 10px;
  }
  
  .editor-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .tips-section {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
    margin-top: 10px;
    font-size: 14px;
  }
  
  .tips-section h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #409EFF;
  }
  
  .tips-section ul {
    margin: 10px 0;
    padding-left: 20px;
  }
  
  .tips-section code {
    background-color: #e6f1fc;
    padding: 2px 5px;
    border-radius: 3px;
    color: #409EFF;
  }
  </style>